<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="input-item">
        <input v-model="username" placeholder="用户名输入" class="input" />
      </view>
      <view class="input-item">
        <picker v-model="selectedSchoolIndex" :range="schools" @change="handleSchoolChange">
          <view class="picker-view">
            <text>{{ schools[selectedSchoolIndex] || '请选择学校' }}</text>
          </view>
        </picker>
      </view>
      <view class="button-group">
        <button class="search-button" @click="search">
          <view>搜索</view>
        </button>
        <button class="change-button" @click="changeBatch">
          <view>换一批</view>
        </button>
      </view>
    </view>

    <!-- 标题 -->
    <view class="title">
      <text>漂流瓶</text>
    </view>

    <!-- 用户列表 -->
    <view class="user-list">
      <view v-for="(user, index) in users" :key="index" class="user-item" @click.stop="showUserDetail(user)">
        <view class="user-avatar">
          <image :src="user.avatar" style="width: 80px; height: 80px; border-radius: 50%;" />
        </view>
        <view class="user-details">
          <view class="user-header">
            <text class="user-name">{{ user.username }}</text>
            <text class="match-degree">匹配度{{ user.matchDegree }}%</text>
          </view>
          <view class="user-profile">
            <text>{{ user.age }}岁 | {{ user.constellation }} | {{ user.gender }} | {{ user.university }} |
              {{ user.job }}</text>
          </view>
          <view class="user-introduction">
            <text>{{ user.introduction }}</text>
          </view>
        </view>
        <view class="user-actions">
          <view class="action-icon" :class="user.isFollowed? 'icon-heart-filled' : 'icon-heart-empty'"
            @click.stop="follow(user, index)"></view>
          <view class="action-icon icon-close" @click.stop="addToBlacklist(user)"></view>
          <view class="action-icon icon-chat" @click.stop="showPrivate(user)"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      school: '',
      selectedSchoolIndex: 0,
      schools: ['选择学校', '南昌大学', '清华大学', '北京大学', '复旦大学'],
      users: [
        {
          username: '小灰',
          avatar: '/static/images/user01.jpg',
          age: 24,
          constellation: '金牛座',
          gender: '男',
          university: '南昌大学',
          job: '软件工程师',
          introduction: '我是一个具有2年工作经验的Java软件工程师。',
          matchDegree: 96,
          isFollowed: false
        },
        {
          username: '小蓝',
          avatar: '/static/images/user02.png',
          age: 24,
          constellation: '金牛座',
          gender: '男',
          university: '南昌大学',
          job: '软件工程师',
          introduction: '我是一个具有2年工作经验的Java软件工程师。',
          matchDegree: 96,
          isFollowed: false
        },
        {
          username: '小红',
          avatar: '/static/images/user03.jpg',
          age: 24,
          constellation: '金牛座',
          gender: '女',
          university: '南昌大学',
          job: '软件工程师',
          introduction: '我是一个具有2年工作经验的Java软件工程师。',
          matchDegree: 96,
          isFollowed: false
        }
      ]
    };
  },
  created() {
    if (this.selectedSchoolIndex >= this.schools.length) {
      this.selectedSchoolIndex = 0;
    }
  },
  methods: {
    search() {
      this.school = this.schools[this.selectedSchoolIndex];
      console.log('搜索用户名:', this.username);
      console.log('搜索学校:', this.school);
    },
    changeBatch() {
      console.log('换一批');
    },
    follow(user, index) {
      user.isFollowed = !user.isFollowed;
      if (user.isFollowed) {
        uni.showToast({
          title: '关注成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '取关成功',
          icon: 'success'
        });
      }
    },
    addToBlacklist(user) {
      uni.showModal({
        title: '提示',
        content: '你确认要加入黑名单吗？',
        confirmText: '确定',
        cancelText: '关闭',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '加入黑名单成功',
              icon: 'success'
            });
          }
        }
      });
    },
    showPrivate(user) {
      // 将用户信息存储到本地缓存中
      uni.setStorageSync('privateUser', user);
      uni.navigateTo({
        url: '/pages/privateChat/privateChat'
      });
    },
    showUserDetail(user) {
      // 这里可以添加点击用户项后显示详细信息的逻辑
      console.log('查看用户详情:', user);
	  uni.navigateTo({
	    url: '/pages/userIndex/userIndex'
	  });
    },
    handleSchoolChange(e) {
      const index = e.target.value;
      this.selectedSchoolIndex = index;
      this.school = this.schools[index];
      this.$forceUpdate(); // Vue 2 中强制渲染
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.container {
  padding: 30px;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.input-item {
  width: 100%;
  margin-bottom: 15px;
}

.input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.input:focus {
  border-color: #007AFF;
  outline: none;
}

.picker-view {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.button-group {
  display: flex;
  justify-content: center;
  width: 100%;
}

.search-button,
.change-button {
  height: 50px;
  border: none;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

.search-button {
  background-color: #007AFF;
  color: white;
}

.search-button:hover {
  background-color: #0056b3;
}

.change-button {
  background-color: #F5F5F5;
  color: #333;
  border: 1px solid #e0e0e0;
}

.change-button:hover {
  background-color: #e0e0e0;
}

.title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
  width: 100%;
  border-bottom: 3px solid #007AFF;
  padding-bottom: 10px;
}

.user-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.user-item {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.user-item:hover {
  transform: translateY(-5px);
}

.user-avatar {
  margin-right: 20px;
}

.user-details {
  flex: 1;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-name {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.match-degree {
  font-size: 18px;
  color: #666;
}

.user-profile {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.user-introduction {
  font-size: 16px;
  color: #333;
}

.user-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.action-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.action-icon:hover {
  transform: scale(1.1);
}

.icon-heart-empty {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="gray" stroke-width="2" fill="none"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-heart-filled {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="red"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-close {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" stroke="gray" stroke-width="2" fill="none"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-chat {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" stroke="gray" stroke-width="2" fill="none"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-search {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.383-.073.53-.22c.295-.293.295-.767.002-1.06z"></path></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
</style>